<template>
	<view class="detail-container" v-show="show">
		<!-- 头部图片 -->
		<view class="header-image">
			<image :src="detail.smallimage" style="width: 100%;" mode="aspectFill"></image>
		</view>

		<!-- 内容区域 -->
		<view class="content-section" style="margin-top: 1rem;">
			<!-- 标题 -->
			<view class="title">{{detail.title}}</view>

			<!-- 基本信息 -->
			<view class="info-section">
				<view class="info-item">
					<text class="label">发布时间：</text>
					<text class="value">{{timestampToDateTimes(detail.createtime)}}</text>
				</view>

			</view>

			<!-- 描述 -->
			<view class="description">
				<rich-text :nodes="detail.content"></rich-text>
			</view>

		</view>

		<!-- 加载提示 -->
		<view class="loading" v-if="loading">加载中...</view>
	</view>
</template>

<script>
	import {
		fetchContentDetail,
		baseUrl,
		timestampToDateTime,
		fetchGroupDetail
	} from '@/api/api.js'

	export default {
		data() {
			return {
				id: '',
				detail: {},
				loading: true,
				groupData: {
					description: "",
					name: "",
					smallimage: "",
					path: "pages/calculator/calculator"
				},
				show:false
			}
		},
		onLoad(options) {

			if (options.id) {
				this.id = options.id
				this.fetchDetail()
			}
		},


		methods: {
			timestampToDateTimes(time) {
				return timestampToDateTime(time)
			},
			async fetchDetail() {
				try {
					const result = await fetchContentDetail(this.id)
					if (result.data) {
						// 处理图片路径
						this.detail = {
							...result.data,
							smallimage: baseUrl + result.data.smallimage
						}
					}
					if (this.detail.url == null || this.detail.url == "") {
						this.show = true
					} else {
						uni.reLaunch({
							url: "/pages/web/web?url=" + encodeURIComponent(this.detail.url)
						})
					}

				} catch (error) {
					console.error('获取详情失败:', error)
					uni.showToast({
						title: '获取详情失败',
						icon: 'none'
					})
				} finally {
					this.loading = false
				}
			}
		}
	}
</script>

<style>
	.detail-container {
		min-height: 100vh;
		background-color: #f8f8f8;
	}

	.header-image {
		width: 100%;
		height: 400rpx;
		overflow: hidden;
	}

	.header-image image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.content-section {
		margin-top: -50rpx;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
		min-height: 800rpx;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
	}

	.info-section {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #eee;
	}

	.info-item {
		font-size: 24rpx;
		color: #666;
	}

	.label {
		margin-right: 10rpx;
	}

	.description {
		font-size: 28rpx;
		color: #333;
		line-height: 1.8;
	}

	.loading {
		text-align: center;
		padding: 30rpx;
		color: #999;
		font-size: 28rpx;
	}
</style>